<!-- class="SingleEditionInput" -->
<template>
  <div class="SingleEditionInput" style="display: block; height: 100%">
    <div>
      <h2 style="display: block; text-align: left">
        {{ $route.query.entryName }}&nbsp;&nbsp;{{ $route.query.entryLang }}
      </h2>
      <h3>
        第&nbsp;&nbsp;{{ currentIndex }} /
        {{ catalogForm.catalogCount }}&nbsp;&nbsp;卷&nbsp;&nbsp;{{
          catalogForm.catalogName
        }}录入
      </h3>
    </div>
    <div
      style="
        height: 485px;
        border: 1px dashed black;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        padding: 20px;
      "
    >
      <el-col :span="8">
        <div class="Pic-lunbo" style="display: block; width: 450px">
          <picturesLunBo
            :imgsUrl="catalogForm.imgs"
            @image-updated="updateCurrentImage"
          ></picturesLunBo>

          <!-- <ForPicture></ForPicture> -->
          <!-- <picturesLunBoPlus></picturesLunBoPlus> -->
        </div>
      </el-col>

      <el-col :span="10">
        <div
          class="sentence-input"
          style="
            display: block;
            height: 480px;
            width: 550px;
            border: 2px dashed #e77644;
            padding: 10px;
            margin-left: -5%;
          "
        >
          <!-- 内容 -->
          <el-form
            :model="sentenceForm"
            ref="ruleForm"
            label-width="110px"
            class="demo-ruleForm"
          >
            <el-form-item :label="firstLang +'第' + currentSentenceIndex + '句:'">
              <el-input
                v-model="sentenceForm.sentence"
                placeholder="请输入原句内容"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="info"
                size="mini"
                @click="prevSentence"
                :disabled="isSentencePrevDisabled"
                >上一句</el-button
              >

              <el-button type="info" size="mini" @click="submitSentenceForm"
                >提交</el-button
              >

              <el-button type="info" size="mini" @click="nextSentence"
                >下一句</el-button
              >

              <el-button @click="sentenceReset" size="mini">重置</el-button>
            </el-form-item>
          </el-form>

          <SingleFileArea
            style="margin-top: 100px"
            :textData="sentenceTextArea"
            :isMongolianFont ="isMongolianFont"
          ></SingleFileArea>
          <!-- 书影原文文件上传组件 -->
          <buttonFileUpload
            :buttonName="buttonName"
            @file-uploaded="handleStrFileUploaded"
            style="margin-top: -30px"
          ></buttonFileUpload>
        </div>
      </el-col>
      <el-col :span="6">
        <div
          class="jd-duizhao"
          style="
            display: block;
            height: 480px;
            width: 340px;
            border: 1px dashed black;
            padding: 5px;
            overflow-y: auto; /* 启用垂直滚动条 */
            overflow-x: hidden; /* 禁用水平滚动条 */
          "
        >
          <h4 style="text-align: left; display: block; margin-top: 2px">
            原句经典版对照选择：
          </h4>
          <!-- 内容 -->
          <el-checkbox-group
            v-model="sentenceForm.sentenceIdJd"
            style="display: block; width: 300px"
          >
            <el-checkbox
              v-for="(sentenceItem, index) in catalogForm.jdbContent"
              :key="index"
              :label="index"
              style="
                display: flex;
                align-items: left;
                width: 300px;
                text-align: left;
                margin: 8px 0;
                white-space: pre-wrap;
              "
            >
              {{ sentenceItem.sentenceIds + ". " + sentenceItem.sentence }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-col>
    </div>

    <div style="margin-top: 20px">
      <el-button type="info" round v-show="currentIndex > 1" @click="prevSlide"
        >上一卷</el-button
      >
      <el-button type="info" round @click="subCatalog">保存本卷</el-button>
      <el-button
        type="info"
        round
        v-show="currentIndex < catalogForm.catalogCount"
        @click="nextSlide"
        >下一卷</el-button
      >
    </div>
  </div>
</template>

<script>
import { getBookInputCatalog, handleSentence } from '@/api/bookInput'
export default {
  data () {
    return {
      firstLang: '',
      isMongolianFont: false, // 判断是不是蒙古语
      buttonName: '少语原文上传', // 按钮名称
      bookId: '', // 书目id
      bookName: '',
      bookNumber: 3, // 最小计量单位总数
      currentIndex: 1, // 当前第几卷，等于this.$route.query.index
      currentSentenceIndex: 1, // 用于指示当前句子的索引
      // 初始化查询本卷信息
      catalogForm: {
        id: 2,
        catalogName: '',
        catalogId: '',
        entryId: '',
        catalogCount: '', // 多少个catalog，即：本书总共多少最小单位
        imgs: [],
        imgsTotal: '', // 本catalog有几张图片
        jdbContent: [
          {
            sentenceId: '',
            entryId: '',
            sentenceIds: '',
            sentence: ''
          }
        ],
        sentence: null,
        content: null,
        chContent: null,
        jdContent: null,
        syContent: null,
        syDzContent: null,
        bookOptime: null,
        notes: null,
        bookOperator: null
      },
      // 每一句提交的表单信息
      sentenceForm: {
        // catalogName: '', // 子书名
        // catalogBookId: '', // 章节主键id
        entryId: '', // 录入的id
        sentenceIds: '', // 属于该卷的第几句
        sentence: '', // 少语原句1
        sentence2: '', // 少语原句2
        dzSentence: '', // 汉语对照
        picUrl: '/picFiles/202311092228259722.png', // 原句对应的书影图片
        sentenceIdJd: [], // 一个列表，原句的经典对照
        banben: '单语版'
      },

      imgIndex: 0, // 当前图片的index
      // created查询获得：本篇章书影地址
      imgsUrl: [
        require('@/assets/YiJin8/易经卷一1.png'),
        require('@/assets/YiJin8/易经卷一2.png'),
        require('@/assets/YiJin8/易经卷一3.png'),
        require('@/assets/YiJin8/易经卷一4.png'),
        require('@/assets/YiJin8/易经卷一5.png'),
        require('@/assets/YiJin8/易经卷一6.png'),
        require('@/assets/YiJin8/易经卷一7.png'),
        require('@/assets/YiJin8/易经卷一8.png')
      ],

      sentenceTextArea: ''
    }
  },
  async created () {
    // 从路由中获取参数值
    // entryId: bookId,
    // entryName: bookName,
    // entryLang: Lang,
    // index: index,
    // sentenceIndex: sentenceIndex
    this.bookId = this.$route.query.entryId // 【注意】传过来的entryId是书目ID,和这个组件自身定义的不一样
    this.bookName = this.$route.query.entryName
    this.currentIndex = this.$route.query.index
    this.currentSentenceIndex = this.$route.query.sentenceIndex
    const entryLang = this.$route.query.entryLang
    // 去除汉语之后，获得Lang数组中的一个元素
    const filteredLang = entryLang.filter(lang => lang !== '汉语')
    // 确保数组不为空再取第一个元素
    this.firstLang = filteredLang.length > 0 ? filteredLang[0] : '少'
    if (this.firstLang === '蒙古语') {
      this.isMongolianFont = true
    }
    this.buttonName = this.firstLang + '原文上传'
    console.log('currentIndex:', this.currentIndex)
    console.log('currentSentenceIndex:', this.currentSentenceIndex)

    // 不能为空
    if (this.currentIndex === null) {
      this.currentIndex = 1
    }
    if (this.currentSentenceIndex === null) {
      this.currentSentenceIndex = 1
    }

    // 按篇章查询信息：本篇章书影 + 本篇章经典版对照
    const res = await getBookInputCatalog(this.bookId, this.bookName, this.currentIndex, this.currentSentenceIndex)
    console.log(res)
    if (res.code === 1) {
      this.catalogForm.catalogName = res.data.name
      this.catalogForm.catalogId = res.data.catalogId
      this.catalogForm.entryId = res.data.entryId
      this.catalogForm.catalogCount = res.data.tot
      //  res.data.imgs 是后端返回的对象数组，{"id": 1, "entryId": 2,"pictureUrl": "/picFiles/202311101121376441.png","order": "1"}
      // this.catalogForm.imgs是一个存储图片地址的数组
      // 不加'api/'会访问不了图片
      this.catalogForm.imgs = res.data.imgs.map(item => 'api/' + item.pictureUrl)
      this.catalogForm.imgsTotal = res.data.imgsTot
      // 处理 jdbContent 数组
      this.catalogForm.jdbContent = res.data.jdbContent.map((item) => ({
        sentenceId: item.sentenceId,
        entryId: item.entryId,
        sentenceIds: item.sentenceIds,
        sentence: item.sentence
      }))
      console.log(this.catalogForm.jdbContent)
      // 设置其他属性
      this.catalogForm.sentence = res.data.sentence
      this.catalogForm.content = res.data.content
      this.catalogForm.chContent = res.data.chContent
      this.catalogForm.jdContent = res.data.jdContent
      this.catalogForm.syContent = res.data.syContent
      this.catalogForm.syDzContent = res.data.syDzContent
      this.catalogForm.bookOptime = res.data.bookOptime
      this.catalogForm.notes = res.data.notes
      this.catalogForm.bookOperator = res.data.bookOperator

      // 回显句子表单的信息
      this.sentenceForm.sentence = res.data.sentence
      this.sentenceForm.sentence2 = res.data.sentence2
      this.sentenceForm.dzSentence = res.data.dzSentence
      this.sentenceForm.sentenceIdJd = res.data.sentenceIdJd
    } else {
      this.$message.error('初始化失败')
    }
  },
  methods: {
    handleStrFileUploaded (fileStr) {
      // 接收子组件传递的文件字符串
      this.sentenceTextArea = fileStr
      console.log(this.sentenceTextArea)
      // 处理其他逻辑...
    },
    // 上一卷
    async prevSlide () {
      this.currentIndex--
      if (this.currentIndex !== 0) {
        this.imgsUrl = []
        this.sentenceStrList = []
        this.sentenceDZStrList = []
        const res = await getBookInputCatalog(this.bookId, this.bookName, this.currentIndex, this.currentSentenceIndex)
        console.log(res)
        if (res.code === 1) {
          this.catalogForm.catalogName = res.data.name
          this.catalogForm.catalogId = res.data.catalogId
          this.catalogForm.entryId = res.data.entryId
          this.catalogForm.catalogCount = res.data.tot
          // this.catalogForm.imgs是一个存储图片地址的数组
          // 不加'api/'会访问不了
          this.catalogForm.imgs = res.data.imgs.map(item => 'api/' + item.pictureUrl)
          this.catalogForm.imgsTotal = res.data.imgsTot
          // 处理 jdbContent 数组
          console.log(res.data.jdbContent)
          this.catalogForm.jdbContent = res.data.jdbContent.map((item) => ({
            sentenceId: item.sentenceId,
            entryId: item.entryId,
            sentenceIds: item.sentenceIds,
            sentence: item.sentence
          }))
          console.log(this.catalogForm.jdbContent)
          // 设置其他属性
          this.catalogForm.sentence = res.data.sentence
          this.catalogForm.content = res.data.content
          this.catalogForm.chContent = res.data.chContent
          this.catalogForm.jdContent = res.data.jdContent
          this.catalogForm.syContent = res.data.syContent
          this.catalogForm.syDzContent = res.data.syDzContent
          this.catalogForm.bookOptime = res.data.bookOptime
          this.catalogForm.notes = res.data.notes
          this.catalogForm.bookOperator = res.data.bookOperator
        } else {
          this.$message.error('切换失败……')
        }
      }
    },
    // 下一卷
    async nextSlide () {
      this.currentIndex++
      if (this.currentIndex !== 0) {
        this.imgsUrl = []
        this.sentenceStrList = []
        this.sentenceDZStrList = []
        const res = await getBookInputCatalog(this.bookId, this.bookName, this.currentIndex, this.currentSentenceIndex)
        console.log(res)
        if (res.code === 1) {
          this.catalogForm.catalogName = res.data.name
          this.catalogForm.catalogId = res.data.catalogId
          this.catalogForm.entryId = res.data.entryId
          this.catalogForm.catalogCount = res.data.tot
          // this.catalogForm.imgs是一个存储图片地址的数组
          // 不加'api/'会访问不了
          this.catalogForm.imgs = res.data.imgs.map(item => 'api/' + item.pictureUrl)
          this.catalogForm.imgsTotal = res.data.imgsTot
          // 处理 jdbContent 数组
          this.catalogForm.jdbContent = res.data.jdbContent.map((item) => ({
            sentenceId: item.sentenceId,
            entryId: item.entryId,
            sentenceIds: item.sentenceIds,
            sentence: item.sentence
          }))
          console.log(this.catalogForm.jdbContent)
          // 设置其他属性
          this.catalogForm.sentence = res.data.sentence
          this.catalogForm.content = res.data.content
          this.catalogForm.chContent = res.data.chContent
          this.catalogForm.jdContent = res.data.jdContent
          this.catalogForm.syContent = res.data.syContent
          this.catalogForm.syDzContent = res.data.syDzContent
          this.catalogForm.bookOptime = res.data.bookOptime
          this.catalogForm.notes = res.data.notes
          this.catalogForm.bookOperator = res.data.bookOperator
        } else {
          this.$message.error('切换失败……')
        }
      }
    },
    // 提交本卷所有句子
    subCatalog () {
      this.$message.success('本卷录入完成！')
      this.nextSlide()
    },
    // 上一句
    prevSentence () {
      if (this.currentSentenceIndex > 0) {
        this.currentSentenceIndex--
        this.sentenceForm.sentence = ''

        // this.sentenceForm.sentenceDZStr = this.sentenceDZStrList[this.currentSentenceIndex]
      }
    },
    // 下一句
    nextSentence () {
      this.currentSentenceIndex++
      this.sentenceForm.sentence = ''
    },
    // 重置句子表单
    sentenceReset () {
      this.sentenceForm.sentence = ''
      this.sentenceForm.sentenceIdJd = []
    },
    // 用于获取子组件中的当前轮播图片地址
    // 父组件的 updateCurrentImage 方法  【注意不要把inex作为参数】
    updateCurrentImage (index1) {
      this.sentenceForm.picUrl = this.imgsUrl[index1]
      console.log(this.sentenceForm.picUrl)
    },
    // 提交句子表单
    async submitSentenceForm () {
      // console.log(this.sentenceForm.sentenceIdJd)
      this.sentenceForm.entryId = this.catalogForm.entryId
      this.sentenceForm.sentenceIds = this.currentSentenceIndex

      const emptyFields = [] // 用于存储空字段的数组

      if (this.sentenceForm.sentence.trim() === '') {
        emptyFields.push('少语原句')
      }
      if (this.sentenceForm.dzSentence.trim() === '') {
        emptyFields.push('汉语对照')
      }
      if (this.sentenceForm.picUrl.trim() === '') {
        emptyFields.push('书影图片')
      }
      if (this.sentenceForm.sentenceIdJd.length === 0) {
        emptyFields.push('经典对照')
      }

      if (emptyFields.length > 0) {
        // 构建错误消息
        const errorMessage = `请填入: ${emptyFields.join(', ')}`
        this.$message.error(errorMessage)
      } else {
        // 所有字段都有值，执行提交操作
        console.log(this.sentenceForm)
        const res = await handleSentence(this.sentenceForm)
        if (res.code === 1) {
          this.$message.success('第' + this.currentSentenceIndex + '句提交成功!')
          this.nextSentence()
        } else {
          this.$message.error('第' + this.currentSentenceIndex + '提交失败……')
        }
      }
    }
  },
  computed: {
    isSentencePrevDisabled () {
      return this.currentSentenceIndex <= 1
    }
  }
}
</script>

<style lang="less" scoped>
.el-checkbox {
  display: block;
  width: 300px;
}
.el-checkbox__label {
  max-width: 80px; //设置最大宽度 超出显示...
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  text-overflow: ellipsis;
}
</style>
